<template>
	<view class="container-main" :style="{ '--top-bar-height': mp.topBarHeight + 'px', '--safe-area-bottom': 0 + 'px', '--menu-top': mp.menuTop + 'px' }"
		v-if="loading">
		<view class="container-main-top">
			<!-- #ifdef MP-WEIXIN -->
			<image class="logo" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/logo.png" mode="" lazy-load></image>
			<image class="logo-text" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/jcwenzi.png" mode="" lazy-load>
			</image>
			<!-- #endif -->
		</view>
		<!-- 最近浏览 -->
		<view class="section" v-if="browseList.list.length > 0">
			<view class="title">最近浏览</view>
			<view class="recent-browse">
				<scroll-view class="scroll-view_H" :scroll-x="true" style="width: 100%" @scrolltolower="getMoreBrowse">
					<view class="scroll-view-item" v-for="(item, index) in browseList.list" :key="item.episodeId" @tap.stop.prevent="onAllVideo(item)">
						<image :src="item.coverPictureUrl" mode="aspectFill" lazy-load></image>
						<view class="scroll-view-item-right">
							<view class="name">{{ item.skitName }}</view>
							<view class="time">观看至{{ item.episodeNo }}/{{ item.publishEpisodeNum }}集</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 推荐 -->
		<view class="section section-recommend" v-if="recommendList.list.length > 0">
			<view class="title">推荐</view>
			<view class="recommend">
				<view class="recommend-list" style="width: 100%">
					<view class="recommend-item" v-for="(item, index) in recommendList.list" :key="item.key" @tap.stop.prevent="onAllVideo(item)">
						<view class="recommend-image" :style="{
								backgroundImage: 'linear-gradient(180deg,transparent 70%,#000), url(' + item.coverPictureUrl + ')',
								backgroundRepeat: 'no-repeat',
								backgroundSize: 'cover',
								backgroundPosition: 'center center'
							}">
							<view class="pursue">{{ item.bingeWatchNum | bingeWatch}}人在追</view>
						</view>
						<view class="scroll-view-item-right">
							<view class="name">{{ item.skitName }}</view>
							<view class="time">
								{{ item.completeState == 0 ? '更新至' : '全' }}{{ item.completeState == 0 ? item.publishEpisodeNum : item.episodeTotal }}集
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="recommendList.loading && recommendList.list.length <= 0">
			<empty></empty>
		</view>
		<view v-show="load.loading">
			<uv-load-more :status="load.status" :loading-text="load.loadingText" :nomore-text="load.nomoreText" :line="load.status == 'nomore'" />
		</view>
		<view class="continue-watch" v-if="continue_watch && recommendList.list.length > 0" @tap.stop.prevent="onAllVideo(continue_watch,1)">
			<image class="continue-watch-image" :src="continue_watch.videoPictureUrl" mode="aspectFill" lazy-load></image>
			<view class="continue-watch-text">继续观看</view>
		</view>
		<uv-popup ref="welfarePopup" bgColor="none" overlayOpacity="0.7" zIndex="99999" :safeAreaInsetBottom="false" @change="welfarePopupChange">
			<view class="welfare-pop">
				<view class="welfare-pop-bg">
					<image class="ewm" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/qywx.jpg" :show-menu-by-longpress="true"
						@tap="previewPureNetworkImage"></image>
				</view>
				<view class="close-icon dy-iconfont icon-close-full" @tap.stop.passive="closePopwe"></view>
			</view>
		</uv-popup>

		<uv-popup ref="welfareWcPopup" bgColor="none" overlayOpacity="0.7" zIndex="99999" :safeAreaInsetBottom="false">
			<view class="welfare-pop-wc">
				<view class="welfare-pop-bg">
					<view class="welfare-num">
						<image class="welfare-image" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/jinb.png"></image>
						<view class="welfare-text">100金币已到账！</view>
					</view>
					<view class="welfare-btn" @tap.stop.passive="closePopqr">确 认</view>
				</view>
			</view>
		</uv-popup>

		<daily-mission v-if="browseList.list.length > 0" ref="mission" @collect="subCollect" @receiveWelfare="receiveWelfare" @lookJu="lookJu">
			<image class="welfare-image" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/welfare-bi-1.png"></image>
		</daily-mission>
		<!-- tabber -->
		<tabbar :current="tabbarCurrent" backdropFilter :tabBar="tabBar"></tabbar>
		<!-- #ifdef MP-WEIXIN -->
		<!-- <addition-MP :additionShow="false"></addition-MP> -->
		<!-- #endif -->
		<addition-pop ref="addition"></addition-pop>
	</view>
</template>

<script>
	const app = getApp();
	import mp from '@/mixins/mp.js';
	import tabbar from '@/components/custom-tabbar/custom-tabbar.vue';
	import empty from '@/components/empty/empty.vue';
	import dailyMission from '@/components/daily-mission/daily-mission.vue';
	import { random } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import {
		getIndexVideoList,
		getBrowseList,
		getShelfList,
		getAward,
		verifyCoupon
	} from '@/common/api';
	export default {
		mixins: [mp],
		components: {
			tabbar,
			empty,
			dailyMission
		},
		data() {
			return {
				tabbarCurrent: 1, //当前索引
				tabBar: app.globalData.tabBar,
				recommendList: {
					list: [],
					hasMore: false,
					loading: false,
					page: 1
				},
				browseList: {
					list: [],
					hasMore: false,
					loading: false,
					page: 1
				},
				load: {
					loading: false,
					status: 'loading',
					loadingText: '努力加载中',
					nomoreText: '没有更多了'
				},
				loading: false,
				continue_watch: null,
				env: 'develop',
				shelfList: [],
				from: ''
			};
		},
		onLoad(option) {
			uni.showLoading({
				title: '正在加载',
				mask: true
			});
			this.getPageData(() => {
				this.loading = true;
				uni.hideLoading();
			});
			// #ifdef MP-TOUTIAO
			this.postverifyCoupon()
			// #endif
			console.log('index option', option);
			this.from = option.from || ''
		},
		onShow() {
			uni.hideTabBar();
			// #ifdef MP-TOUTIAO
			let envType = tt.getEnvInfoSync().microapp.envType
			this.env = envType == 'development' ? 'develop' : envType == 'production' ? 'release' : 'trial'
			// #endif

			// #ifdef MP-WEIXIN
			this.env = wx.getAccountInfoSync().miniProgram.envVersion
			// #endif
			const videoCurrent = uni.getStorageSync('videoCurrent');
			if (typeof videoCurrent == 'string' && videoCurrent) {
				this.continue_watch = JSON.parse(videoCurrent)
			} else {
				this.continue_watch = videoCurrent
			}
			if (this.env != this.continue_watch.env) {
				this.continue_watch = null
			}
			// console.log(videoCurrent);
			this.browseList.page = 1;
			this.requestBrowseList()
			// this.requestShelfList()
		},
		onHide() {},
		onPullDownRefresh: function() {
			this.recommendList.page = 1;
			this.browseList.page = 1;
			this.recommendList.loading = false;
			this.recommendList.list = [];
			this.getPageData();
			this.requestBrowseList()
		},
		/**
		 * 触底
		 */
		onReachBottom() {
			// this.recommendList.hasMore && 
			setTimeout(() => {
				if (this.recommendList.loading) {
					this.load.loading = true;
					this.requestVideoList();
				}
			}, 500)
		},
		onShareAppMessage: function(option) {
			const that = this;
			return {
				// 转发的标题
				// #ifdef MP-WEIXIN
				title: '全场超多短剧免费看',
				path: '/pages/index/index',
				//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，
				//支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				imageUrl: 'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/share--2.png',
				// #endif

				// #ifdef MP-TOUTIAO
				imMsgType: 1,
				// taskIds: ['d6j8q1goe1g136iloh'],
				templateId: 'd6j8q1goe1g136iloh',
				success(e) {
					console.log("分享成功-MP-TOUTIAO", e, option);
					if (option.from == 'button') {
						that.missionShare()
					}
				},
				fail() {
					console.log("分享失败");
				},
				// #endif
			}
		},
		watch: {},
		filters: {
			bingeWatch(val) {
				// let watchNum = Number(val) * random(10000, 99999)
				if (val == 0) {
					return (random(100000, 999999) / 10000).toFixed(1) + '万'
				} else {
					return (val / 10000).toFixed(1) + '万'
				}
			}
		},

		methods: {
			// 加载页面数据
			getPageData: function(callback) {
				Promise.all([this.requestVideoList()]).then(() => {
					callback && callback();
					uni.stopPullDownRefresh();
				}).catch(() => {
					callback && callback();
				});
			},
			requestVideoList() {
				return new Promise((resolve, reject) => {
					let params = {
						pageNo: this.recommendList.page,
						pageSize: 8
					};
					getIndexVideoList(params).then((result) => {
						uni.hideLoading();
						let total = result.total;
						let data = result.list;
						data.forEach(item => {
							item.key = Date.parse(new Date()) + '' + item.id
						})
						let {
							page,
							list,
							hasMore
						} = this.recommendList;
						list = [...list, ...data];
						if (page == 1) {
							hasMore = total > data.length;
						} else {
							hasMore = total > (page - 1) * 8 + data.length;
						}
						if (hasMore) {
							page++;
							this.load.loading = false;
						} else {
							page = 1
							// this.load.status = 'nomore';
							this.load.loading = list.length > 4;
						}
						resolve({
							data: data.length,
							hasMore
						});
						this.recommendList.page = page;
						this.recommendList.list = list;
						// this.recommendList.hasMore = hasMore;
						this.recommendList.loading = true;
					}).catch((err) => {
						this.recommendList.loading = true;
						reject();
					});
				});
			},
			requestBrowseList() {
				return new Promise((resolve, reject) => {
					let params = {
						pageNo: this.browseList.page,
						pageSize: 6
					};
					getBrowseList(params).then((result) => {
						let total = result.total;
						let data = result.list;
						let {
							page,
							list,
							hasMore
						} = this.browseList;
						if (1 == page) {
							list.length = 0;
						}
						list = [...list, ...data];
						hasMore = total > list.length;
						if (hasMore) {
							page++;
							this.load.loading = false;
						}
						resolve({
							data: data.length,
							hasMore
						});
						this.browseList.page = page;
						this.browseList.list = list;
						this.browseList.hasMore = hasMore;
						this.browseList.loading = true;
					}).catch((err) => {
						this.browseList.loading = true;
						reject();
					});
				});
			},
			requestShelfList() {
				getShelfList().then((result) => {
					this.shelfList = result.activityList
					if (this.shelfList[2].completeState == 0 && this.from == 'fuli') {
						getAward({
							"activityId": this.shelfList[2].activityId,
							"everyGoldNum": this.shelfList[2].everyGoldNum
						}).then((result) => {
							this.$refs.welfareWcPopup.open();
						});
					}
				});
			},
			postverifyCoupon() {
				verifyCoupon().then((result) => {
					console.log('verifyCoupon', result);
					if (result.verificationFlag) {
						this.$refs.welfareWcPopup.open();
					}
				});
			},
			getMoreBrowse() {
				if (this.browseList.hasMore && this.browseList.loading) {
					this.requestBrowseList();
				}
			},
			onAllVideo(item, s) {
				console.log(item);
				let id = item.aid ? item.aid : item.skitId ? item.skitId : item.id;
				if (s && s == 1) {
					const videoCurrent = uni.getStorageSync('videoCurrent');
					if (typeof videoCurrent == 'string' && videoCurrent) {
						id = JSON.parse(videoCurrent).aid
					} else {
						id = videoCurrent.aid
					}
				}
				if (!id) {
					uni.removeStorageSync('videoCurrent');
				} else {
					uni.navigateTo({
						url: '/page_account/video/video?ablum_id=' + id + '&tt_album_id=' + item.thirdSkitId + '&tt_episode_id=' + item.thirdEpisodeId
					});
				}
			},
			missionShare() {
				const that = this;
				that.$refs.mission.shareSucceed();
			},
			subCollect(e) {
				this.$refs.addition.show();
			},
			receiveWelfare() {
				this.$refs.welfarePopup.open();
			},
			closePopwe() {
				this.$refs.welfarePopup.close();
			},
			lookJu() {
				uni.switchTab({
					url: '/pages/recommend/recommend'
				})
			},
			previewPureNetworkImage() {
				uni.previewImage({
					urls: ['https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/qywx.jpg']
				});
			},
			closePopqr() {
				this.$refs.welfareWcPopup.close();
			},
			welfarePopupChange(e) {
				if (!e.show) {
					this.$refs.mission.goMission();
				}
			},
		}
	};
</script>

<style lang="scss">
	page {
		/* #ifdef MP-WEIXIN */
		background: #000;
		/* #endif */
		background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/new_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 1071rpx;
		background-position: 0 0;
	}

	.container-main {
		box-sizing: border-box;
		padding-top: calc(var(--top-bar-height) + 24rpx);
		padding-bottom: calc(var(--safe-area-bottom) + 124rpx);

		.container-main-top {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;
			height: calc(var(--top-bar-height) + 24rpx);
			background: #000;
			background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/new_bg.png');
			background-repeat: no-repeat;
			background-size: 100% 1071rpx;
			background-position: 0 0;
			box-sizing: border-box;
			padding-top: var(--menu-top);
			padding-left: 24rpx;

			.logo {
				width: 64rpx;
				height: 64rpx;
				border-radius: 14rpx;
				margin-right: 10rpx;
				vertical-align: middle;
			}

			.logo-text {
				// width: 108rpx;
				// height: 45rpx;
				width: 174rpx;
				height: 33rpx;
				vertical-align: middle;
			}
		}

		.section {
			margin-bottom: 64rpx;

			.title {
				font-weight: 900;
				font-size: 36rpx;
				color: #ffffff;
				line-height: 50rpx;
				box-sizing: border-box;
				padding-left: 24rpx;
				margin-bottom: 24rpx;
			}

			.recent-browse {
				.scroll-view_H {
					white-space: nowrap;

					.scroll-view-item {
						width: 398rpx;
						height: 174rpx;
						display: inline-block;
						border-radius: 20rpx;
						border: 1rpx solid transparent;
						background-clip: padding-box, border-box;
						background-origin: padding-box, border-box;
						background-image: linear-gradient(#160f15, #160f15), linear-gradient(137deg, rgba(255, 255, 255, 0.31), rgba(255, 255, 255, 0.1));
						backdrop-filter: blur(8px);
						margin-left: 16rpx;
						box-sizing: border-box;
						padding: 16rpx;
						white-space: nowrap;

						&:first-child {
							margin-left: 24rpx;
						}

						&:last-child {
							margin-right: 24rpx;
						}

						image {
							width: 118rpx;
							height: 142rpx;
							border-radius: 20rpx;
							margin-right: 16rpx;
							display: inline-block;
							vertical-align: middle;
						}

						.scroll-view-item-right {
							display: inline-block;
							vertical-align: middle;

							.name {
								font-weight: 600;
								font-size: 28rpx;
								color: #ffffff;
								line-height: 40rpx;
								margin-bottom: 20rpx;
								width: calc(398rpx - 118rpx - 16rpx - 16rpx);
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.time {
								font-weight: 400;
								font-size: 24rpx;
								color: #a09d9e;
								line-height: 33rpx;
								width: calc(398rpx - 118rpx - 16rpx - 16rpx);
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
				}
			}
		}

		.section-recommend {
			margin-bottom: 0;

			.recommend {
				box-sizing: border-box;
				padding: 0 24rpx;

				.recommend-list {
					display: grid;
					grid-template-columns: calc(50% - 11rpx) calc(50% - 11rpx);
					column-gap: 22rpx;
					row-gap: 40rpx;
					width: 100%;

					.recommend-item {
						.recommend-image {
							width: 100%;
							height: 454rpx;
							border-radius: 20rpx;
							position: relative;

							.pursue {
								position: absolute;
								right: 16rpx;
								bottom: 16rpx;
								font-weight: 400;
								font-size: 22rpx;
								color: #ffffff;
								line-height: 30rpx;
							}
						}

						.scroll-view-item-right {
							margin-top: 20rpx;

							.name {
								font-weight: 400;
								font-size: 28rpx;
								color: #ffffff;
								line-height: 40rpx;
								margin-bottom: 8rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.time {
								font-weight: 400;
								font-size: 24rpx;
								color: #a09d9e;
								line-height: 33rpx;
							}
						}
					}
				}
			}
		}
	}

	.continue-watch {
		position: fixed;
		left: 2rpx;
		bottom: 198rpx;
		width: 142rpx;
		height: 220rpx;
		// height: 220rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 20rpx;
		backdrop-filter: blur(8px);
		box-sizing: border-box;
		// padding: 12rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.31);
		// border-image: linear-gradient(137deg, rgba(255, 255, 255, 0.31), rgba(255, 255, 255, 0.1)) 1 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.continue-watch-image {
			width: 118rpx;
			height: 158rpx;
			border-radius: 20rpx;
		}

		.continue-watch-text {
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
		}
	}

	.welfare-pop-wc {
		position: relative;

		.welfare-pop-bg {
			width: 688rpx;
			height: 650rpx;
			background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/welfare-lq.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 0 0;
			box-sizing: border-box;
			padding: 376rpx 0 88rpx 0;

			.welfare-num {
				margin-bottom: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.welfare-image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 8rpx;
				}

				.welfare-text {
					font-weight: 600;
					font-size: 32rpx;
					color: #FF6F00;
					line-height: 45rpx;
					text-align: center;
				}
			}

			.welfare-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 440rpx;
				height: 96rpx;
				background: linear-gradient(150deg, #FF6F00 0%, #FFE67E 100%);
				box-shadow: 0rpx 2rpx 28rpx 0rpx #FBA83D;
				border-radius: 48rpx;
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 96rpx;
				text-align: center;
				padding: 0;
				margin: 0 auto;
			}
		}
	}

	.welfare-pop {
		position: relative;

		.welfare-pop-bg {
			width: 688rpx;
			height: 1040rpx;
			background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/welfare-ewm.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 0 0;

			.ewm {
				position: absolute;
				top: 361rpx;
				left: 144rpx;
				width: 400rpx;
				height: 400rpx;
			}
		}

		.close-icon {
			font-size: 20rpx;
			width: 40rpx;
			height: 40rpx;
			color: #FFFCFC;
			border: 1rpx solid #FFFFFF;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 38rpx auto 0;
		}
	}

	.welfare-image {
		width: 106rpx;
		height: 100rpx;
	}
</style>